<template>
    <div id="breed">
        <div class="box" v-for="(itemList, index) of dataList" :key="index">
            <ul class="box-ul">
                <li v-for="item in itemList" :key="item.id">
                    <el-card class="box-ul-card" :body-style="{ padding: '0px' }">
                        <div slot="header" class="box-ul-card-header">
                            <div class="box-ul-card-header-img">
                                <img :src="item.introductionSrc">
                            </div>
                        </div>
                        <div class="box-ul-card-body">
                            <div class="box-ul-card-body-introduce">{{ item.breedName }}</div>
                            <div class="box-ul-card-body-introduce">{{ item.appearance }}</div>
                            <div class="box-ul-card-body-introduce">{{ item.breedCharacter }}</div>
                            <div class="box-ul-card-body-introduce">{{ item.aggression }}</div>
                            <div class="box-ul-card-body-introduce">{{ item.habits }}</div>
                            <div class="box-ul-card-body-introduce">{{ item.diet }}</div>
                            <div class="box-ul-card-body-introduce">{{ item.difficulty }}</div>
                            <div class="box-ul-card-body-introduce">{{ item.origin }}</div>
                        </div>
                    </el-card>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'breed',
        data() {
            return {
                value: null,
                dataList: [],
                catimgurl: this.$baseURL + '/static/img/baseImg.png',
                dogimgurl: this.$baseURL + '/static/img/dogbase.jpg',
            }
        },
        methods: {
            GetBreedList() {
                let loading = this.$loading({
                    text: '数据加载中',
                    target: '#breed'
                })
                this.$GET('/breed/getAllList').then((response) => {
                    let data = response.data.data
                    let catsDataList = []
                    let dogsDataList = []
                    this.dataList = []
                    data.forEach(item => {
                        if (item.type == 1) {
                            item.introductionSrc = this.dogimgurl
                            dogsDataList.push(item)
                        }
                        else {
                            catsDataList.push(item)
                            item.introductionSrc = this.catimgurl
                        }
                    });
                    this.dataList.push(catsDataList, dogsDataList)
                    console.log(response);
                    setTimeout(() => {
                        loading.close()
                    })
                }).catch((response) => {
                    console.error(response);
                    setTimeout(() => {
                        loading.close()
                    })
                })
            }
        },
        activated() {
            this.GetBreedList()
        },
        mounted() {
            this.GetBreedList()
        },
    }
</script>

<style scoped lang="less">
    #breed {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;

        .box {
            width: 45%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            flex: 1;
            overflow-y: scroll;

            .box-ul {
                display: flex;
                flex-direction: row;
                justify-content: center;
                flex-wrap: wrap;

                .box-ul-card {
                    width: 400px;
                    height: 750px;
                    padding: 10px;
                    margin: 10px 50px;
                    box-shadow: 10px 10px 5px var(--main-box-shadow-color);

                    &:hover {
                        border: 1px solid rgb(250, 220, 100);
                        box-shadow: 5px 5px 5px rgb(250, 220, 100);
                    }

                    .box-ul-card-header {
                        display: flex;
                        max-height: 200px;
                        flex-direction: column;
                        justify-content: space-around;
                        align-items: center;

                        &-img {
                            display: flex;
                            width: 100%;
                            height: 100%;
                            border-radius: 5%;
                            border: 1px solid var(--main-bg-color);
                            overflow: hidden;
                            justify-content: center;
                            align-items: center;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: center;
                            }
                        }
                    }

                    &-body {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        flex: 1;
                        align-items: flex-start;

                        .box-ul-card-body-introduce {
                            display: block;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            width: 350px;
                            height: 65px;
                            line-height: 1.2em;
                            text-align: left;
                            padding: 10px;
                            padding-bottom: 0px;
                            border-top: 1px solid var(--main-bg-color);
                            border-bottom: 1px solid var(--main-bg-color);
                            flex: 1;
                        }

                        &-img {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            width: 350px;
                            max-height: 100%;
                            flex: 1;
                            border-radius: 15px;
                            overflow: hidden;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: center;
                            }
                        }
                    }
                }
            }
        }
    }
</style>